<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <!-- 触底增加更多
  v-model:是否处于加载更多的状态
   -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    offset="50"
    :immediate-check="false"
  > <!-- :immediate-check="false"这个属性是让代码上来初始化时不要判定 -->
    <!-- 文章列表 -->
    <article-item :obj="obj" v-for="obj in artileList" :key="obj.art_id" />
  </van-list>
  </van-pull-refresh>
</template>

<script>
import ArticleItem from './components/ArticleItem.vue'
import { getArticleListAPI } from '@/api'

export default {
  data () {
    return {
      artileList: [], // 文章列表
      loading: false, // 底部加载状态
      finished: false, // 数据是否全部加载完成
      nextTime: new Date().getTime(), // 用于分页  用来保存本次要请求的时间戳
      isLoading: false // 顶部加载状态
    }
  },
  props: {
    cid: Number // 频道id
  },
  components: { // 选项式API, 局部注册组件的选项
    // key:组件标签名, value: 组件对象
    ArticleItem
  },
  created () {
    this.getArticleListFn()
  },
  methods: {
    // 获取-文章列表数据
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.cid, // 先默认请求推荐频道数据
        timestamp: this.nextTime // 把当前系统的时间戳传递给服务器
      })
      console.log(res)
      // 合并数据,先把把数据展开,放到一起
      this.artileList = [...this.artileList, ...res.data.data.results]
      this.nextTime = res.data.data.pre_timestamp
    },
    // 底部加载的方法
    async onLoad () {
      // 如果页面没有数据,没有高度,让本次onload事件不继续往下执行
      // if (this.artileList.length === 0) {
      //   return // ruturn拦截
      // }
      this.getArticleListFn()
      const res = await getArticleListAPI({
        channel_id: this.cid,
        timestamp: this.nextTime // 把当前系统的时间戳传递给服务器
      })
      console.log(res)

      this.loading = false // 如果不关闭,底部一直是加载中的状态,再次触底不会触发触底事件 onload()
      if (res.data.data.pre_timestamp === null) { // 本次返回的数据是最后的数据,没有下一段数据了
        this.finished = true
      }
    },
    // 顶部刷新数据的方法
    async onRefresh () {
      // 目标:下拉刷新后
      this.artileList = []
      this.nextTime = new Date().getTime()
      const res = await getArticleListAPI({
        channel_id: this.cid,
        timestamp: this.nextTime // 把当前系统的时间戳传递给服务器
      })
      console.log(res)
      // 合并数据,先把把数据展开,放到一起
      this.artileList = [...this.artileList, ...res.data.data.results]
      this.nextTime = res.data.data.pre_timestamp

      // 顶部的加载状态改为false
      this.isLoading = false
    }
  }
}
</script>

<style>
</style>
